<!--
 工作流，指令节点卡片
 @Author: zhanbh
 @Date: 2021-04-09
-->
<template>
  <div class="order-card">
    <div class="order-card__main">
      <span class="order-card__logo">
        <i class="order-card__icon" :class="icon"></i>
      </span>
      <span v-if="title" class="order-card__title">{{ title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderCard',
  props: {
    title: {
      type: String,
      default: '指令下发'
    },
    status: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'dg-iconp iconp-l-zhiling'
    }
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
  created() {}
};
</script>

<style scoped lang="scss">
@import '../variable';

.order-card {
  border: dashed 1px rgba($--info, 0.45);
  border-radius: 4px;

  &.is-error {
    border-color: rgba($--error, 0.45);
  }
  &.is-success {
    border-color: rgba($--success, 0.45);
  }

  &__main {
    @include flex-column;
    margin: 0.375rem;
    background-color: rgba($--info, 0.05);
    padding: 1rem 2rem;
    border-radius: 4px;
  }
  &.is-error &__main {
    background-color: rgba($--error, 0.05);
  }
  &.is-success &__main {
    background-color: rgba($--success, 0.05);
  }

  &__logo {
    @include round(2.75rem, 0.5rem);

    background-color: $--info;
    margin-bottom: 1rem;
  }
  &.is-error &__logo {
    background-color: $--error;
  }
  &.is-success &__logo {
    background-color: $--success;
  }
  &__icon {
    font-size: 1.5rem;
    color: #fff;
  }

  &__title {
    font-size: 1rem;
    color: $--info;
    font-weight: bold;
  }
  &.is-error &__title {
    color: $--error;
  }
  &.is-success &__title {
    color: $--success;
  }
}
</style>
